<template>
  <div class="wraptopbar">
    <!-- 版心 -->
    <div class="wrap left">
      <!-- 左边标题 -->
      <h1>欢迎来到叩丁狼积分商城</h1>
      <!-- 右边导航栏 -->
      <ul class="right">
        <li>
          <img @click="showToastFn" :src="userInfo.headImg" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="cart-btn" v-if="isLogined">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }}</strong>
        </li>
        <li class="login" @click="changeIsShowLoginModal(true)" v-else>登录</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeiXinLoginAPI } from "@/Request/api";

export default {
  // data() {
  //   return {
  //     // 购物车总数
  //     cartTotal: 0,
  //   };
  // },
  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      chanIsShowToast: "showToact/chanIsShowToast",
      chanIsLogined: "loginStatus/chanIsLogined",
      changeIsLogined: "loginStatus/changeIsLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      // asynChangeIsShowToast: "showToast/asynChangeIsShowToast",
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
    showToastFn() {
      this.chanIsShowToast(true);
    },
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  async created() {
    // 获取code值(当微信用户点击允许后，页面会重新刷新，也就会从新执行topbar中create钩子函数)
    // console.log(this.$route.query.code);
    // 如果有code
    let code = this.$route.query.code;
    if (code) {
      let res = await WeiXinLoginAPI({
        code,
      });
      // console.log("微信登录后res:", res);
      // 返回的code中 三个结果
      /* 
      效果重现：
      1.[重现407] 微信没有关联的时候（去备份地址中解绑）--扫码登录--Login.vue 去输入手机号登录进行关联
      2.[重现400]地址中有code 并且code无效就可以了
      3.[重现0] 微信和手机号关联成功后，重新扫码登录
      */

      if (res.code == 0) {
        // 1.code==0 登陆成功
        // 1.1 提示
        alert("登录成功");
        // 1.2 存token
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        // 1.3更新左上角购物车按钮显示
        this.chanIsLogined(true);
        // 1.4清除地址栏的toten
        this.$route.query.code && this.$router.push(this.$route.path);

        this.asyncChangeUserInfo();
      } else if (res.code == 400) {
        // 2.code ==400 二维码失效(code失效)
        // 2.1 提示重新扫码
        alert("二维码已经失效，请重新扫码");
        // this.asynChangeIsShowToast({
        //   msg: "二维码已经失效，请重新扫描登录",
        //   type: "danger",
        // });
        // 2.2 自动打开模态框
        this.changeIsShowLoginModal(true);
      } else if (res.code == 407) {
        // 3.code == 407 需要用户再进行一次手机号方式登录(后期让后台将微信和手机号进行关联)
        // 3.1提示用户需要进行一次手机号登录
        alert("请使用手机号再进行登录");
        // 3.2自动打开登录模块框
        this.changeIsShowLoginModal(true);
        // 3.3存储uuid(一会登录要用)
        localStorage.setItem("uuid", res.uuid);
      }
    } else {
      // ！！！如果不是微信登录进来的，就会执行这里的代码
      let token = localStorage.getItem("x-auth-token");
      this.chanIsLogined(Boolean(token));
      if (token) {
        // 获取用户信息并更新vuex的数据
        this.asyncChangeUserInfo();
      } else {
        this.initUserInfo();
      }
    }
  },
  // 解决：登录成功后，手动山删除token，切换导航时，购物车没变
  // watch: {
  //   // 监听路由地址的变化
  //   "$route.path": {
  //     handler(newVal, oldVal) {
  //       console.log("watch...", newVal, oldVal);
  //       if (newVal != oldVal) {
  //         // 判断当前是否还有token
  //         let token = localStorage.getItem("x-auth-token");
  //         // if (token) {
  //         //   this.changeIsLogined(true);
  //         // } else {
  //         //   this.changeIsLogined(false);
  //         // }
  //         this.changeIsLogined(Boolean(token));
  //       }
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.wraptopbar {
  min-width: 1200px;
  height: 40px;
  background: #242b39;
  .left {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    line-height: 40px;
    text-align: center;
  }
  .right {
    display: flex;
    align-items: center;
    cursor: pointer;
    .cart-btn {
      width: 124px;
      height: 40px;
      background: #0a328e;
      text-align: center;
      img {
        width: 20px;
        height: 19px;
        vertical-align: middle;
      }
      span {
        margin: 0 8px;
      }
      strong {
        width: 22px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        border-radius: 50%;
        background-color: #fd604d;
      }
    }
    img {
      width: 23px;
      height: 22px;
      border-radius: 13px;
      text-align: center;
      line-height: 40px;
      vertical-align: middle;
    }
    li {
      margin-left: 20px;
    }
    .login {
      width: 124px;
      height: 40px;
      background: #0a328e;
    }
  }
}
</style>